import { createApp } from 'vue' // 从 Vue 框架中导入 createApp 函数，用于创建 Vue 应用实例。
import App from './App.vue' // 导入根组件 App.vue，它是整个应用的入口组件。
import router from './router'  // 导入路由配置，router 是在 src/router/index.js 中定义的，用于管理应用的路由。
import ElementPlus, { formContextKey } from 'element-plus' // 导入 ElementPlus 组件库。ElementPlus 是一个基于 Vue 3 的 UI 组件库。
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 导入 ElementPlus 的图标库，以方便在应用中使用图标。
import 'element-plus/dist/index.css' // 导入 ElementPlus 组件库的 CSS 样式文件，确保组件样式能正常显示。
import request from './utils/request' // 导入封装好的网络请求工具，是基于 axios 封装的，用于与后端进行数据交互。
import storage from './utils/storage' // 导入封装的本地存储工具，用于操作 localStorage 或 sessionStorage。
import api from './api' // 导入封装的 API 接口，将与后端接口的交互逻辑统一管理。
import store from './store' // 导入状态管理库实例，是基于 Vuex 实现的，用于管理应用的全局状态。

// 在控制台打印当前的环境变量
console.log("环境变量=>", import.meta.env)

const app = createApp(App); // 创建vue应用实例

// 自定义指令 has，并使用了 beforeMount 钩子函数
app.directive('has', {
    beforeMount: (el, binding) => {
        //console.log('>>>>', el, binding)
        // 获取按钮权限
        let actionList = storage.getItem('actionList') || [];
        let value = binding.value;
        // 判断列表中是否有对应的按钮权限标识
        let hasPermission = actionList.includes(value);
        if (!hasPermission) {
            el.style = "display:none"; // 隐藏该按钮
            // 这里不能直接删，因为这是在DOM渲染前
            setTimeout(() => {
                el.parentNode.removeChild(el); // 删除该按钮所在的父元素
            }, 0)
        }
    }
})

// 遍历 ElementPlus 图标库中的所有图标组件，并将它们全局注册到 Vue 应用中。这样在整个应用的任何组件中都可以直接使用这些图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
// 挂载全局属性
app.config.globalProperties.$request = request; // 将封装的网络请求工具挂载到全局属性上，这样在任何组件中都可以通过 this.$request 来调用网络请求方法。
app.config.globalProperties.$api = api; // 组件中可以通过 this.$api 来调用 API 方法
app.config.globalProperties.$storage = storage; // 组件中可以通过 this.$storage 来操作本地存储。
app.use(router).use(store).use(ElementPlus, {size:''}).mount('#app') // 将 Vue 应用挂载到 HTML 文件中 id 为 app 的元素上，使应用在页面上显示

